<template>
  <div>
    <a-card title="筛选条件" style="width: 70%; min-width: 900px;">
      <a-form-model
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-row>
          <template v-for="item in queryList">
            <a-col :span="7" :key="item.id">
              <a-form-model-item :label="item.name">
                <a-input :placeholder="'查询方式 ' + item.queryType" />
              </a-form-model-item>
            </a-col>
            <a-col :span="1" :key="item.code">
              <a-tooltip title="删除">
                <a @click="handleQueryDelete(item)" style="padding: 0 10px; line-height: 36px">
                  <a-icon type="delete" />
                </a>
              </a-tooltip>
            </a-col>
          </template>
        </a-row>
        <div>
          <a-select v-model="queryForm.id" style="width: 150px" placeholder="请选择字段">
            <a-select-option v-for="item in queryColumnOptions" :key="item.id" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
          <a-select v-model="queryForm.type" style="width: 80px">
            <a-select-option value="EQ">=</a-select-option>
            <!-- <a-select-option value="NE">!=</a-select-option>
            <a-select-option value="GT">></a-select-option>
            <a-select-option value="GTE">>=</a-select-option>
            <a-select-option value="LT">&lt;</a-select-option>
            <a-select-option value="LTE">&lt;=</a-select-option> -->
            <a-select-option value="LIKE">LIKE</a-select-option>
            <a-select-option value="BETWEEN">BETWEEN</a-select-option>
          </a-select>
          <a @click="handleQueryAdd" style="padding-left: 10px" :disabled="!queryForm.id">
            <a-icon type="plus" />添加
          </a>
        </div>
      </a-form-model>
    </a-card>
    <!-- <a-card title="数据列表" style="width: 70%; min-width: 900px; margin-top: 20px">
      <a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="显示字段">
          <a-transfer
            :data-source="transSource"
            :titles="['隐藏', '显示']"
            :target-keys="targetKeys"
            :render="item => item.title"
            @change="handleTransChange"
          />
        </a-form-model-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
          <a-button type="primary" @click="handleListSubmit">
            提交
          </a-button>
        </a-form-item>
      </a-form-model>
    </a-card> -->
  </div>
</template>
<script>
import { updateColumnSimple, configListShow } from '@/api/free/column'
import { Transfer } from 'ant-design-vue'
export default {
  name: 'ListShowForm',
  components: {
    [Transfer.name]: Transfer
  },
  props: {
    tableName: {
      type: String,
      required: true
    },
    columnList: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      loading: false,
      queryForm: {
        type: 'EQ',
        id: undefined
      },
      labelCol: {
        xs: { span: 12 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      // 类型数据字典
      typeOptions: [],
      // 类型数据字典
      statusOptions: [],
      // 列表字段穿梭框
      targetKeys: []
    }
  },
  computed: {
    queryList () {
      return this.columnList.filter(item => item.queryType).sort((a, b) => a.querySort - b.querySort)
    },
    queryColumnOptions () {
      return this.columnList.filter(item => !item.queryType)
    },
    transSource () {
      return this.columnList.map(item => {
        return {
          key: item.id + '',
          title: item.name,
          description: `${item.name} (${item.code})`,
          disabled: false
        }
      })
    }
  },
  created () {
  },
  mounted () {
    
  },
  methods: {
    // 初始化穿梭框 选中列表
    initTargets(columnList) {
      this.targetKeys = columnList.filter(item => item.listShow === 'Y').map(item => item.id+'')
    },
    handleQueryAction (id, queryType) {
      const params = {
        id,
        queryType
      }
      updateColumnSimple(params).then(res => {
        this.$emit('reload')
        if (queryType) {
          this.queryForm.id = undefined
        }
      })
    },
    handleQueryDelete (item) {
      this.handleQueryAction(item.id, '')
    },
    handleQueryAdd () {
      const { id, type } = this.queryForm
      if (id) {
        this.handleQueryAction(id, type)
      }
    },
    handleTransChange (targetKeys) {
      this.targetKeys = targetKeys
    },
    handleListSubmit () {
      const params = {
        showIds: this.targetKeys.join(','),
        tableName: this.tableName
      }
      configListShow(params).then(res => {
        this.$emit('reload')
        this.$message.success(
          '修改成功',
          3
        )
      })
    }
  }
}
</script>
